<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>020动态组件与v-once指令</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="root">
    <h6>方法二 动态组件</h6>
    <!-- <component :is="type"></component> -->
    <h6>方法一 原始组件</h6>
    <!-- <child-one v-if="type === 'child-one'"></child-one>
    <child-two v-if="type === 'child-two'"></child-two> -->
    <!-- <button @click="handleBtnClick">change</button> -->
  </div>
  <script>
    var vm = new Vue({
      el: "#root",
      data: {
        type: "child-one"
      },
      template: `
        <div v-once>
          <child-one v-if="type === 'child-one'"></child-one>
          <child-two v-if="type === 'child-two'"></child-two>  
          <button @click="handleBtnClick">change</button>
        </div>
      `,
      components: {
        "childOne": {
          data: function() {
            return {
              data: "child-one"
            }
          },
          template: `<div>{{data}}</div>`
        },
        "childTwo": {
          data: function() {
            return {
              data: "child-two"
            }
          },
          template: `<div>{{data}}</div>`
        }
      },
      methods: {
        handleBtnClick: function() {
          this.type = this.type === "child-one" ? "child-two" : "child-one";
        }
      },
    })
  </script>
</body>
</html>